import React, { Component } from 'react';
import { Avatar, Dropdown, Layout, Menu, message } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { AdminStore } from "../store/AdminStore";
import { inject, observer } from "mobx-react";
import '../static/css/header.css'
import LeftBar from './LeftBar'

import {
    BrowserRouter as Router,
    Redirect,
    Switch,
    Route,
    Link,
    matchPath,
    withRouter,
    RouteComponentProps
} from "react-router-dom";

import PermissionStore from "../store/PermissionStore";
import SubTitle from './SubTitle';

interface IProps extends RouteComponentProps {
    adminStore?: AdminStore
    permissionStore?: PermissionStore
}

interface IState {
    auth: boolean
}

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

@inject('adminStore', 'permissionStore')
@observer

class AppLayout extends Component<IProps, IState> {

    constructor(props: IProps, context: any) {
        super(props, context);
        this.state = {
            auth: false
        }
    }

    //会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用
    static getDerivedStateFromProps(props: Readonly<IProps>, state: Readonly<IState>) {
        console.log(props.permissionStore?.state);

        if (props.permissionStore?.state === 'success') {
            let auth: boolean = false

            for (let permission of props.permissionStore.permissionList) {
                let match = matchPath(props.location.pathname, { path: permission.path })
                if(match!==null && match.isExact){
                    auth = true
                    break
                }
            }
            console.log(auth)
            if(!auth){
                //跳转 ，提示没有权限 跳转到第一个权限
                message.error("没有权限")
            }
            return { auth: auth }
        }

        return null;//如果是null 就不受理
    }

    // componentDidMount(){
    //     // this.setState({
    //     //     auth:true
    //     // })
    // }


    logout = () => {
        this.props.adminStore?.logout()
        window.location.href = '/login'
    }

    render() {
        console.log('====================================');
        console.log(this.state.auth);
        console.log('====================================');

        if (this.props.permissionStore?.state === 'loading') {
            return (
                <>
                    loading
                </>
            )
        }

        if (!this.state.auth) {
            return (
                <>
                    no auth
                </>
            )
        }
        return (
            <>
                <Layout>
                    <Header className="header">
                        <div className="logo" />
                        <Dropdown
                            overlay={
                                <Menu>
                                    <Menu.Item key="1" onClick={this.logout}>
                                        退出
                                    </Menu.Item>
                                </Menu>
                            }
                            className={'admin'}
                        >
                            <div>
                                <Avatar
                                    src={this.props.adminStore?.admin?.avatar}
                                />
                                <span className={'admin-name'}>
                                    {this.props.adminStore?.admin.name}
                                </span>
                                <DownOutlined />
                            </div>
                        </Dropdown>
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                            <Menu.Item key="1">nav 1</Menu.Item>
                            <Menu.Item key="2">nav 2</Menu.Item>
                            <Menu.Item key="3">nav 3</Menu.Item>
                        </Menu>
                    </Header>
                    <Layout>
                        <LeftBar />
                        <Layout style={{ padding: '0 24px 24px' }}>
                            <SubTitle />
                            <Content
                                className="site-layout-background"
                                style={{
                                    padding: 24,
                                    margin: 0,
                                    minHeight: 280,
                                }}
                            >
                                {this.props.children}
                                {/* {this.props.children} 表示组件里的内容显示在这里  */}
                            </Content>
                        </Layout>
                    </Layout>
                </Layout>
            </>
        );
    }
}

export default withRouter(AppLayout);